<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" trimDirectiveWhitespaces="true"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ include file="/WEB-INF/jsp/common/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>创建新用户</title>
<jsp:include page="../addlink.jsp" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/statics/css/public_form.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/statics/css/system_add.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/statics/lib/zTree/css/zTreeStyle/zTreeStyle.css"
	type="text/css">
<script type="text/javascript"	src="${pageContext.request.contextPath}/statics/lib/zTree/js/jquery.ztree.core.js"></script>
<script type="text/javascript"	src="${pageContext.request.contextPath}/statics/lib/zTree/js/jquery.ztree.excheck.js"></script>
<script>

var setting = {
		view: {
			dblClickExpand: false
		},
		data: {
			key: {
				name:"branName"
			},
			simpleData: {
				enable: true,
				idKey:"branCode",
				pIdKey:"admBranCode",
				rootPId:0
			}
		},
		callback: {
			beforeClick: beforeClick,
			onClick: onClick
		}
	};

	function beforeClick(treeId, treeNode) {
		/* var check = (treeNode && !treeNode.isParent);
		if (!check) alert("只能选择城市...");
		return check; */
	};

	//点击树节点 时将选中节点返回给页面
	function onClick(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("deptTree");
		var nodes = zTree.getSelectedNodes();
		var nodeName = nodes[0].branName;
		var nodeId = nodes[0].id;
			$("#parentId").attr("value", nodeId);
		$("#parentName").attr("value", nodeName);
		//为使得用户体验更加，选中节点后，影藏数结构
		hideMenu() ;
	};
	//点击搜索框，显示树
	function showMenu() {
		var parentObj = $("#parentName");
		var parentOffset = parentObj.offset();
		$("#menuContent").css({left:parentOffset.left + "px", top:parentOffset.top + parentObj.outerHeight() + "px"}).slideDown("fast");
		$("body").bind("mousedown", onBodyDown);
	};
	function hideMenu() {
		$("#menuContent").fadeOut("fast");
		$("body").unbind("mousedown", onBodyDown);
	};
	function onBodyDown(event) {
		if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
			hideMenu();
		}
	};
	$(document).ready(function(){
		//此地方要稍微注意下，考虑不将本身以及下级节点显示出来，怕选择错误，造成连环套
		var deptId = $("#id").val();
		$.get("${basePath}/sys/dept/getParentDeptTreeData?deptId=",
				function(zNodes){
					//初始化数结构
					//var jsonObj= $.parseJSON(zNodes.jsonObj);
					var tree = $.fn.zTree.init($("#deptTree"), setting, zNodes);
					//默认展开节点
					var nodes = tree.getNodesByParam("level",3);
					for(var i=0;i<nodes.length;i++){
						tree.expandNode(nodes[i],true,false,false);
					}
					//如果是进入修改页面，定位到当前选中的节点
					var selectNodeId = $("#parentId").val();
					if(selectNodeId!=null){
						tree.selectNode(tree.getNodeByParam("id",selectNodeId,null));
					}
			
		});
	});

	$(function(){
		var editFlag = ${editFlag};
		url = "${basePath}/sys/user/saveUser";
		if(editFlag == 2){
			url = "${basePath}/sys/user/updateUser";
		}
		$("#saveUser").on('click',function(){
			//获取字典修改后的信息数据,组装成json字符串
			var formObject = {};
			var formArray =$("form:first").serializeArray();
			$.each(formArray, function(i, item){
				if(item.name != 'roleIdList'){
					formObject[item.name]=item.value;
				}
			});
			var userVo = {};
			userVo['user'] = formObject;
			//获取复选框的值
		 	var roleCheckObj = {};
		 	var roleIdArray = $("input[name='roleIdList']:checked").serializeArray();
		 	if(roleIdArray==""){zxTips_short({txt:"请选择角色"});}
 			$.each(roleIdArray, function(i, item){
 				roleCheckObj[item.value]=item.value;
			 });
			userVo["roleIds"]=roleCheckObj;
			console.log(JSON.stringify(userVo));
			//return false;
			$.ajax({
				type:"POST",
				url:url,
				dataType:'json', 
				contentType :"application/json;charset=UTF-8",
				data: JSON.stringify(userVo),//传递给服务器的参数	
				success:function(data){
					if(checkTokenError(data)){
					if(data.code == -998){
						zxTips_short({txt:data.message});
						//alert(data.message);
					}else if(data.code == 200){
						setTimeout(function(){
							window.location.href = "${basePath}/sys/user/toUserList"
						},1000);
						zxTips_short({txt:data.message});
					}
					//console.log(data.result);
					}
				}
			});
		});
	});
</script>
</head>
<body>

	<jsp:include page="../head.jsp" />

	<div class="container-fluid all">
		<jsp:include page="../menu.jsp" />
		<div class="maincontent">
			<ol class="breadcrumb">
				<li class="url-root"><a>系统设置</a></li>
				<li class="url-root"><a>用户管理</a></li>
				<li class="active">创建新用户</li>
			</ol>
			<div class="form_mode">
				<form class="form-horizontal" method="post" action="#">
					<input name="id" type="hidden" value="${backUser.id}"/>
					<div class="form-group">
						<label class="col-sm-2 control-label">用户部门</label>
						<div class="col-sm-10 input-group"   style="padding-left:15px;">
							<input id="parentId" name="deptId" class="required" type="hidden" value="${backUser.deptId}"/>
							<input id="parentName" type="text" class="form-control"  readonly="readonly" value="${backUser.deptName}" onclick="javascript:showMenu();">
							 <span class="input-group-btn">  
								 <a id="menuButton" href="javascript:showMenu();" class="btn btn-info btn-search" style="height:35px;line-height:35px;">查找</a>  
							 </span>
						</div>
					</div>
					<div id="menuContent" class="col-sm-4" style="z-index:100;display:none; position: absolute; background: #f0f6e4;left:360px;top:188px;">
						<ul id="deptTree" class="ztree col-sm-4"></ul>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">用户名称</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="username" value="${backUser.username}">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">登录账号</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="loginName" value="${backUser.loginName}">
						</div>
					</div>
					<!-- <div class="form-group">
						<label for="inputPassword3" class="col-sm-2 control-label">登录密码</label>
						<div class="col-sm-10">
							<input type="password" class="form-control" name="password">
						</div>
					</div> -->
					<div class="form-group">
						<label class="col-sm-2 control-label">性别</label>
						<div class="col-sm-10">
							<label class="radio-inline"> 
								<input type="radio" name="gender" value="0"  
								<c:if test="${editFlag == 1 || backUser.gender == 0}">checked</c:if>> 男
							</label>
							<label class="radio-inline"> 
								<input type="radio" name="gender" value="1"
								<c:if test="${backUser.gender == 1}">checked</c:if>> 女
							</label>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">手机号码</label>
						<div class="col-sm-10">
							<input class="form-control" name="phone" value="${backUser.phone}" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onchange="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
							<%-- <input type="number" class="form-control" name="phone" value="${backUser.phone}"> --%>
						</div>
					</div>					
					<div class="form-group">
						<label class="col-sm-2 control-label">用户角色</label>
						<div class="col-sm-10">	
							<c:forEach items="${roleList}" var="role">				 			
								<span>						
									<input id="roleId${role.id}" name="roleIdList" class="required" type="checkbox" 
									<c:if test="${roleCheckMap[role.id] == role.id}">checked</c:if>  value="${role.id}"/>
									<label for="roleId${role.id}">${role.name}</label>
								</span>
								 
							</c:forEach>
							<span class="help-inline"><span style="color:red">*</span> </span>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<!-- <button type="submit" class="btn btn-success">保存</button> -->
							<span class="btn btn-success" id="saveUser">保存</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<jsp:include page="../foot.jsp" />
</body>
</html>
